Reactの関数コンポーネントでMapbox GL JSを表示するデモ

よりよい実装->https://qiita.com/Kanahiro/items/cddabb26f3faf77dd81d

はじめに

Vueが好きです（告白） でもReactの方が流行ってるらしいのでキャッチアップしておかなきゃならんという事でcreate-react-appしてみました とりあえずMapbox GL JSを表示したかったのですが、関数コンポーネントでちゃんと動く例がネット探してもなかったので備忘録兼ねて記事化しておきます

関数コンポーネント？

今まで使ってこなかったのであんまりよくわかってないですがクラスより関数の方が良いらしいです（関数型がトレンドという事でしょう） ネット上で見つかるReact+Mapbox GL JSの例はほとんどクラスコンポーネントだったので、じゃあよりよいという関数コンポーネントでやってみようとしましたが、hooksがどうとか謎用語連発でちょっと困りました

https://sparkgeo.com/blog/build-a-react-mapboxgl-component-with-hooks/ 参考サイト（でもこれをコピペしても動きません）

コード

import React, { CSSProperties, useEffect, useRef, useState } from 'react';
import mapboxgl from 'mapbox-gl';
import 'mapbox-gl/dist/mapbox-gl.css';

const styles: CSSProperties = {
    width: '100vw',
    height: 'calc(100vh - 80px)',
    position: 'absolute',
};

const App = () => {
    const [map, setMap] = useState(null);
    const mapContainer = useRef(null);

    useEffect(() => {
        const initializeMap = ({
            setMap,
            mapContainer,
        }: {
            setMap: any;
            mapContainer: any;
        }) => {
            const map = new mapboxgl.Map({
                container: mapContainer.current,
                style: 'YOUR_MAPBOX_STYLE_URL',
                center: [140, 44.0],
                zoom: 5,
            });

            map.on('load', () => {
                setMap(map);
                map.resize();
            });
        };

        if (!map) initializeMap({ setMap, mapContainer });
    }, [map]);

    return <div ref={mapContainer} style={styles} />;
};

export default App;

メモ

リファレンス読んでないしほぼ語れる事がないのでほとんど推測

• useState()によりコンポーネント内の変数を1箇所で管理する（っぽい、たぶんgetterとsetterを提供してる）
• useRef()でクラス内のhtml的参照を変数で管理する（っぽい）
• CSSProperties、オブジェクト的にCSS書けるの強そう